<template>
  <div class="login">
    <div class="aa" v-if="!aa">
      <div class=""><a class="close" id="close" href="http://localhost:8080/#/commodity" title="关闭" tabindex="14"></a></div>
      <div class="tyes">账号登录密码</div>
      <div class="kuy">
        推荐使用
        <a class="switch" hidefocus="true" id="switcher_qlogin" href="#" tabindex="7">快速安全登录</a>
        防止盗号。
      </div>
      <div class="kuyh">
        <form @submit.prevent="submitForm">
        <input type="text" class="control" placeholder="支持QQ号/邮箱/手机号登录" v-model.trim="formInput.username">
        <input type="password" class="crol" placeholder="密码" v-model.trim="formInput.password">
        <div >
          <button class="btn">授权登录</button>
        </div>
         </form>
      </div>
      <div class="bottom" id="bottom_web" style="display: block;">
      <a href="#" class="link" id="forgetpwd">找回密码</a>
      <span class="dotted">|</span>
      <a href="#" class="link"  @click="aa = true">新用户注册</a>
      <span class="dotted">|</span>
      <a class="link" id="feedback_web" href="#" target="_blank">意见反馈</a>
      </div>
    </div>
    <div v-else class="aa">
      <div class=""><a class="close" id="close" href="#" title="关闭" tabindex="14"></a></div>
      <div class="tyesw">用户注册</div>
      <div class="kuy">
        以有账号
        <span class="switch" id="switcher_qlogin"  @click="aa = false">返回登录</span>
      </div>
      <div class="kuyh">
          <input type="text" class="control" placeholder="用户名"  v-model.trim="q">
          <input type="password" class="crol" placeholder="密码" v-model="password">
          <input type="password" class="crol" placeholder="确认密码" v-model="rp_password">
        <div >
          <input @click="kpa" type="submit" tabindex="6" value="注册" class="btn" id="login_button">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      formInput: {
        username: '1111111',
        password: '123456'
      },
      aa: undefined,
      q: '',
      password: '',
      rp_password: ''
    }
  },
  computed: {
    ...mapState('user', ['as'])
  },
  mounted () {
    this.aa = this.as
  },
  methods: {
    kpa () {
      if (!this.q.length) {
        return alert('用户名不能为空')
      } else if (this.q.length < 4 || this.q.length > 12) {
        return alert('用户名必须大于4小于12')
      }
      if (!this.password.length) {
        return alert('密码不能为空')
      } else if (this.password.length < 6 || this.password.length > 12) {
        return alert('密码必须大于6小于12')
      }
      if (this.rp_password !== this.password) {
        return alert('确认密码必须与密码一致')
      }
      this.$store.dispatch('user/register', { username: this.q, password: this.password })
      alert('注册成功')
      this.q = ''
      this.password = ''
      this.rp_password = ''
      this.aa = false
    },
    async submitForm () {
      const { username, password } = this.formInput
      if (!username.length || !password.length) return alert('账号和密码不能为空')
      try {
        await this.$store.dispatch('user/login', this.formInput)
        this.$router.push('/')
      } catch (error) {
        console.log('发生了错误')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
      background-color: rgb(230, 245, 255);
    height: 3507px;
    width: 100%;
    opacity: 0.7;
 .aa {
    height: 368px;
    width: 622px;
    margin: -184px 0px 0px -311px;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #fff;
     .abc {
        widows: 47px;
        height: 20px;
       }
      .close {
        width: 47px;
        height: 20px;
        float: right;
        background: url(//imgcache.qq.com/ptlogin/v4/style/40/images/icon_3_tiny.png) -225px -126px no-repeat;
        outline: 0;
     }
     .tyes {
       font-size: 24px;
       color: #000;
       margin:25px 239px ;
     }
      .kuy {
        font-size: 14px;
        color: #999;
        text-align: center;
         .switch {
           color: #2D77E5;
           cursor:pointer;
         }
      }
        .kuyh {
          width: 272px;
          height: 156px;
          margin: auto;
          margin-top: 20px;
           .control {
              width: 262px;
              position: relative;
              height: 18px;
              padding: 10px 0 10px 10px;
              line-height: 18px;
              border: none;
              border-radius: 4px;
              background: rgba(204,204,204,.2);
              color: #000;
              font-family: PingFang SC;
              font-size: 16px;
              outline: none;
           }
            .crol {
                width: 262px;
                position: relative;
                height: 18px;
                padding: 10px 0 10px 10px;
                line-height: 18px;
                border: none;
                border-radius: 4px;
                background: rgba(204,204,204,.2);
                color: #000;
                font-family: PingFang SC;
                font-size: 16px;
                outline: none;
                margin-top: 15px;
            }
              .btn {
                width: 272px;
                height: 40px;
                color: #fff;
                font-size: 16px;
                background-color: #09f;
                border-radius: 4px;
                border: 0;
                left: 0;
                outline: 0;
                margin-top: 25px;
              }
        }
          .bottom {
            height: 16px;
            margin-bottom: 15px;
            width: 100%;
            position: absolute;
            bottom: 0;
            text-align: center;
            font-size: 16px;
            color: #000;
            line-height: 20px;
             .dotted {
               margin: 0 5px;
             }
              .link {
                color: #000;
              }
          }
              .tyesw {
                font-size: 24px;
       color: #000;
       margin:25px 263px ;
              }
  }
}

</style>
